<template>
  <div class="alloc-menu">
    <!-- z这是角色ID为:{{ $route.params.roleId }} -->
    <!-- 这是角色ID为:{{ roleId }} -->
    <el-card>
      <el-tree
      ref="menu-tree" node-key="id"
      :data="menus" :props="defaultProps"
      :default-checked-keys="checkedKeys"
      default-expand-all show-checkbox>
      </el-tree>
      <div style="marign: 50px;padding:10px">
        <el-button @click="onclear">清空</el-button>
        <el-button type="primary"
        @click="onSave">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getMenuNodeList, allocateRoleMenus, getRoleMenus } from '@/services/menu'
export default {
  name: 'AllMenu',
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      // 存储所有菜单信息
      menus: [],
      defaultProps: {
        children: 'subMenuList',
        label: 'name'
      },
      // 存储选择的数据 id
      checkedKeys: []
    }
  },
  created () {
    // 加载所有菜单信息，用于展示tree结构
    this.loadMenus()
    // 加载⻆⾊拥有的菜单列表
    this.loadRoleMenus()
  },
  methods: {
    async loadMenus () {
      const { data } = await getMenuNodeList()
      // console.log(data)
      if (data.code === '000000') {
        this.menus = data.data
      }
    },
    async loadRoleMenus () {
      const { data } = await getRoleMenus(this.roleId)
      if (data.code === '000000') {
        // console.log(data)
        // 获取选中的数据
        this.getCheckedmenus(data.data)
      }
    },
    // 筛选出已经被选择的菜单项的id
    getCheckedmenus (menus) {
      menus.forEach(menu => {
        // 遍历数据 将所有存在子节点的 node 排除 ，此时遍历子节点的列表进行筛选
        menus.forEach(menu => {
          // 未选中的情况
          if (!menu.selected) {
            return
          }
          // 检测是否存在子节点
          if (menu.subMenuList) {
            // 同时说明当前节点为‘⽗节点’，不能存⼊，否则勾选会导致⼦选项全选
            return this.getCheckedmenus(menu.subMenuList)
          }
          // 走到这说明已经是选中了的没有子节点的节点
          // 存储选中数据的 id
          this.checkedKeys = [...this.checkedKeys, menu.id]
          // this.checkedKeys.push(menu.id)
        })
      })
    },
    async onSave () {
      // 发送请求,传递两个值一个是角色的id以及选中的菜单项的key--id所组成的数组
      // this.$ref['menu-tree'].getCheckedKeys()
      const { data } = await allocateRoleMenus({
        roleId: this.roleId,
        menuIdList: this.$refs['menu-tree'].getCheckedKeys()
      })
      // console.log(data)
      // console.log(this.roleId)
      // console.log(this.$refs['menu-tree'].getCheckedKeys())
      if (data.code === '000000') {
        this.$message.success('success')
        this.$router.push({
          name: 'role'
        })
      }
    },
    onclear () {
      this.$refs['menu-tree'].setCheckedKeys([])
    }
  }
}
</script>

<style lang="scss" scoped></style>
